<template>
    <div class="g-idWrap">
      <p class="cardTips">点击姓名切换默认就诊人</p>
      <div class="m-id" v-for="item in formList" :key="item.id"  @click="card(item)">
        <span class="selected" v-if="selectedId === item.health_card_id"></span>
        <img src="../assets/hbjkc.png" class="bg" alt="">
        <div class="m-owner" >
            <div class="owner" @click.stop="newDefaultcard(item)"> 
                <div class="name">{{item.name}}</div>
                <div class="idn">{{item.id_no.replace(/^(.{4})(?:\d+)(.{4})$/,"$1**********$2")}}</div>
            </div>
            <vue-qr :text="item.qrcode_text" :margin="0" colorDark="#000" colorLight="#fff" :logoSrc="icon"  :size="80"></vue-qr>
        </div>
      </div>
      <div class="m-id" v-for="item in oldFormList" :key="item.id"  @click="oldcard(item)" @dblclick="defaultcard(item)">
        <span class="selected" v-if="oldSelectedId === item.patientcard"></span>
        <img src="../assets/njzk.jpg" class="bg" alt="">
        <div class="m-owner" >
            <div class="owner" @click.stop="oldDefaultcard(item)"> 
                <div class="name">{{item.patId.patientName}}</div>
                <div class="idn">{{item.patId.idNo.replace(/^(.{4})(?:\d+)(.{4})$/,"$1**********$2")}}</div>
            </div>
            <!-- <vue-qr :text="item.patId.patientCard" :margin="0" colorDark="#000" colorLight="#fff" :logoSrc="icon"  :size="80"></vue-qr> -->
        </div>
      </div>
      <button type="button" class="btn btn-primary" @click="addcard">添加健康卡</button>
  </div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
    components: {
      vueQr
    },
    data(){
        return{
            selectedId: '',
            oldSelectedId: 'D6B790A9A9BC544C9B42FD199C5C70A9DF8FF3DF3F0460B82F38A9FD6E32BB19:1',
            icon:require("../assets/logo_.png"),
            oldCardUrl:'http://wx.lfhospital.net/yygh/f/user/cardManager/cardform?id=',
            formList:[
                // {
                //     id:'f1',
                //     name:'刘德华',
                //     id_no:'120120200010101999X',
                //     qrcode_text:'D6B790A9A9BC544C9B42FD199C5C70A9DF8FF3DF3F0460B82F38A9FD6E32BB19:0:C0FAC95063D1AE2DAF5C43DE9B3B8AA2'
                // },
                // {
                //     id:'f2',
                //     name:'刘德华',
                //     id_no:'120120200010101999X',
                //     qrcode_text:'D6B790A9A9BC544C9B42FD199C5C70A9DF8FF3DF3F0460B82F38A9FD6E32BB19:0:C0FAC95063D1AE2DAF5C43DE9B3B8AA2'
                // }
            ],
            oldFormList:[]
        }
    },
    created(){
        this.getCardList();
    },
    computed:{
        
    },
    methods:{
        card(item) {
            // this.selectedId = item.id
            this.$router.push({name:'addcard', query: {cardDate:item}})
        },
        oldcard(item) {
            window.location = "https://health.tengmed.com/open/getUserCode?redirect_uri=" + this.oldCardUrl + item.id
        },
        addcard(){
            // 
            window.location = "https://health.tengmed.com/open/getUserCode?redirect_uri=http://wx.lfhospital.net/test/dist/#/card"; 
        },
        getCardList() {
            this.$api.getHCardList().then(res=>{
                // var resp = JSON.stringfity(res.data);
                console.log('res-->',res)
                this.formList = res.data.data
                this.oldFormList = res.data.oldData
                this.selectedId = res.data.newDefPatient
                this.oldSelectedId = res.data.oldDefPatient
            })
        },
        newDefaultcard(item) {
            console.log('设置默认:',item)
            var reqParams = {}
            reqParams.patientId = item.pat_id
            reqParams.healthCardId = item.health_card_id
            this.$api.defaultcard(reqParams).then( res=> {
                console.log(res)
                this.getCardList()
                alert('切换成功')
            })
        },
        oldDefaultcard(item) {
            var reqParams = {}
            console.log('设置默认:',item)
            reqParams.patientId = item.patientid
            reqParams.healthCardId = item.patientcard
            this.$api.defaultcard(reqParams).then( res=> {
                console.log(res)
                this.getCardList()
                alert('切换成功')
            })
        }
    }
}
</script>
<style scoped>
.g-idWrap{
    padding: 30px 10px 10px 10px;
}
.m-id{
    position: relative;
    margin-bottom: 10px;
}
/* .m-id::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:10;
    background:rgba(255,255,255,0)
} */
.m-id .bg{
    display: block;
    width: 100%;
}
.m-owner{
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
    padding:0 20px;
}
.m-owner >>> .name{
    font-size: 18px;
}
.m-owner >>> .idn{
    font-size: 18px;
}
.m-owner >>> .qr{
    width: 25%;
    height: auto;
}
.btn{
    display: block;
    width: 100%;
    margin-top: 10px;
}
.selected{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 40px;
    width: 40px;
    background: url('') left top no-repeat;
    background-size: contain;
}
.cardTips{
    height: 28px;
    line-height: 28px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color:#fdf6ec;
    color:  red;
    font-size: 14px;
    z-index: 22;
    text-align: center;
}
</style>